<template>
  <div id="ranged-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Chord} = G2Plot

onMounted(() => renderRanged())

function renderRanged() {
  const data = [
    {source: '北京', target: '天津', value: 30},
    {source: '北京', target: '上海', value: 80},
    {source: '北京', target: '河北', value: 46},
    {source: '北京', target: '山东', value: 49},
    {source: '北京', target: '西海', value: 19},
    {source: '天津', target: '河北', value: 62},
    {source: '天津', target: '甘肃', value: 82},
    {source: '天津', target: '上海', value: 16},
    {source: '河北', target: '青藏', value: 76},
    {source: '河北', target: '内蒙古', value: 24},
    {source: '内蒙古', target: '北京', value: 32},
  ]
  const chord = new Chord('ranged-container', {
    data,
    sourceField: 'source',
    targetField: 'target',
    weightField: 'value',
    tooltip: {
      fields: ['name', 'source', 'target', 'value', 'isNode'],
      showContent: true,
      formatter: (datum) => {
        const { isNode, name, source, target, value } = datum;
        if (isNode) {
          return {
            name: `${name}(源权重)`,
            value: data.filter((d) => d.source === name).reduce((a, b) => a + b.value, 0),
          };
        }
        return {
          name: `${source} -> ${target}`,
          value,
        }
      }
    }
  })

  chord.render()
}
</script>